<template>
  <div class="semCouponItemList">
    <search-block>
      <template slot="button">
        <el-button type="primary" @click="search(couponId, true)">查询</el-button>
        <el-popover
          v-model="statVisible"
          placement="bottom"
          trigger="click">
          <el-button slot="reference" @click="getStat">统计</el-button>
          <div>
            <el-descriptions direction="vertical" :column="3" border v-if="statData">
              <el-descriptions-item
                v-for="({label, value}) in couponTypeOptions"
                :key="value"
                :label-class-name="statusClass(value)"
                :label="label">{{statData[value] || 0}}</el-descriptions-item>
            </el-descriptions>
            <el-skeleton animated style="width:190px;height:185px" v-else>
              <template slot="template">
                <el-skeleton-item variant="rect" style="width:189px;height:90px"/>
                <el-skeleton-item variant="rect" style="width:189px;height:90px"/>
              </template>
            </el-skeleton>
          </div>
        </el-popover>
      </template>
      <el-form inline :model="model" @submit.native.prevent>
        <el-form-item label="券状态:">
          <el-select v-model="model.status" clearable>
            <el-option
              v-for="item in couponTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </search-block>
    <y-table
      ref="table"
      border
      :pagination='{
        total: 0,
        currentPage:1,
        pageSize: 5,
        position: "right",
        pageSizes: [5, 10, 30, 50],
        layout: "sizes,total,prev, pager, next,jumper"
      }'
      :immediate="false"
      :getDataWay="getDataWay"
      :columns="columns">
      <el-table-column slot="status" label="状态" align="center" header-align="center">
        <template v-slot="{row}">
          <div>券状态：
            <span :class="statusClass(row.status)">{{$$getCommonArrayName(row.status, couponTypeOptions)}}</span>
          </div>
          <div v-if="row.ownTime">领取时间：{{ row.ownTime.replace('T', ' ') }}</div>
          <div v-if="row.issueTime">使用时间：{{ row.issueTime.replace('T', ' ') }}</div>
        </template>
      </el-table-column>
    </y-table>
  </div>
</template>

<script>
export default {
  name: "semCouponItemList",
  inject: ['getEnum'],
  props: {
    couponId: String
  },
  computed: {
    getDataWay() {
      return {
        dataType: 'url',
        data: this.$api.sem.couponItemList,
        param: Object.assign({}, this.model)
      }
    },
  },
  data(){
    return{
      statVisible: false,
      statData: null,
      couponTypeOptions: this.getEnum('couponType'),
      model:{
        status: ''
      },
      columns: [
        {
          label: "序列号",
          prop: "couponItemSn",
          width: 200
        },
        {
          label: "批次",
          prop: "batchNo",
          width: 140
        },
        {
          label: "过期日期",
          prop: "deadLineDate",
          width: 100,
          formatter(row){
            return (row.deadLineDate || '').replace('T', ' ');
          }
        },
        {
          prop: "status",
          template: true
        }
      ],
    }
  },
  methods:{
    search(id, jumpToFirst){
      this.$refs['table'] && this.$refs['table'].loadData(Object.assign({
        couponId: id
      }, this.model), jumpToFirst);
    },
    statusClass(status){
      switch(status){
        case '0': return 'y-success';
        case '1': return 'y-warning';
        case '2': return 'y-primary';
        case '3': return 'y-danger';
        case '4': return 'y-info';
        case '5': return 'y-warning';
      }
      return ''
    },
    getStat(){
      this.$yAxios({
        url: this.$api.sem.couponItemStat,
        data: {
          couponId: this.couponId
        }
      }, info => {
        this.$set(this, 'statData', info);
      })
    }
  }
}
</script>

<style scoped>
.semCouponItemList{
  margin-top: -20px;
}
</style>